<template>
  <div class="contents">
    <span class="back" @click="goBack">返回上一页</span>
    <!-- 一楼 -->
    <div class="f1" v-if="data">
      <div class="title">
        <p>{{ data.oderid }}</p>
        <h5 v-if="data.status == '待反馈'" style="background: #fda261">
          {{ data.status }}
        </h5>
        <h5 v-else>
          {{ data.status }}
        </h5>
        <span v-if="data.statuss == '199'">
          您的申请未通过预审，您可联系人工客服010-53358030或
          <i @click="goCrossBorder()">申请其他产品</i>
        </span>
        <span v-else-if="data.statuss == '200'">
          您的申请已通过预审，您可在线
          <i
            @click="goCreditExtension"
            v-bind:class="{
              nactive: kjApplyInfo.kjapplyid
            }"
            >提交正式申请</i
          >（查看<i @click="download">资料清单</i>）
        </span>
      </div>
      <!-- 产品信息 -->
      <div class="details">
        <div class="details-item">
          <div class="details-item-left">
            <ul>
              <li>产品名称：</li>
            </ul>
            <div>
              <p>{{ data.productname }}</p>
            </div>
          </div>
          <div class="details-item-left">
            <ul>
              <li>申请日期：</li>
            </ul>
            <div>
              <p>{{ data.inputdate | getDate }}</p>
            </div>
          </div>
          <div class="details-item-left">
            <ul>
              <li>金融机构：</li>
            </ul>
            <div>
              <p style="width: 2.2917rem">
                {{ data.guarantee.length == 0 && !data.Funder ? '-' : data.guarantee }}
                <span
                  v-show="data.Funder && data.guarantee.length != 0 && data.status != '审批拒绝'"
                  >-</span
                >
                <span v-show="data.status != '审批拒绝'"> {{ data.Funder }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 二楼 -->
    <div class="f2">
      <!-- 顶部标签 -->
      <div class="title">
        <h3>
          <span>项目信息</span>
        </h3>
      </div>
      <div class="titles">
        <h1></h1>
        <h3>项目进度</h3>
      </div>
      <div class="schedule" v-if="data">
        <div class="schedule1">
          <img src="@/assets/shangpiao/组194.png" alt="" />
          <h1
            :class="{
              yfk: data.status == '已反馈',
              dfk: data.status == '待反馈'
            }"
          ></h1>
          <img v-if="data.status == '已反馈'" src="@/assets/shangpiao/组194.png" alt="" />
          <img v-if="data.status == '待反馈'" src="@/assets/shangpiao/组195.png" alt="" />
        </div>
        <div class="schedule2">
          <div
            v-show="data.status == '已反馈'"
            class="state"
            :class="{
              tg: data.statuss == '100',
              jj: data.statuss == '199'
            }"
          >
            {{ data.statuss == '199' ? '拒绝' : '通过' }}
          </div>
          <span>预授信评估申请</span>
          <h2></h2>
          <span :class="{ dfk: data.status == '待反馈' }">评估结果</span>
        </div>
        <div class="schedule3">
          <span>{{ data.a }} </span>
          <h3></h3>
          <span>{{ data.b }} </span>
        </div>
      </div>
      <div class="titles">
        <h1></h1>
        <h3>申请信息</h3>
      </div>
      <div class="details-item">
        <div class="details-item-left">
          <ul style="width: 1.2rem; position: relative">
            <li>企业纳税人状态：</li>
            <li>企业纳税信用等级：</li>
            <li>企业海关信用等级：</li>
            <li>企业欠缴关税记录数：</li>
            <li>当期财报年份：</li>
          </ul>
          <div style="width: 1.0417rem; margin-right: 0.2344rem">
            <p>{{ kjApplyInfo.taxpayerstatus == 1 ? '正常' : '非正常' }}</p>
            <p>{{ kjApplyInfo.creditrating }}</p>
            <p>{{ kjApplyInfo.customs }}</p>
            <p>{{ kjApplyInfo.enttariff }}</p>
            <p>{{ kjApplyInfo.particularyear }}</p>
          </div>
        </div>
        <div class="details-item-left">
          <ul style="width: 2.4rem; position: relative">
            <li>最近12个月海关进口税费支付金额 （元）：</li>
            <li>最近12个月单月最高海关进口税费支付金额（元）：</li>
            <li>企业上年度进口纳税金额（元）：</li>
            <li>企业当期年度利润总额（元）：</li>
            <li>企业上期年度利润总额（元）：</li>
          </ul>
          <div>
            <p>{{ kjApplyInfo.customsamount | getArea }}</p>
            <p>{{ kjApplyInfo.highestamount | getArea }}</p>
            <p>{{ kjApplyInfo.paytaxesmoner | getArea }}</p>
            <p>{{ kjApplyInfo.currentprofit | getArea }}</p>
            <p>{{ kjApplyInfo.periodprofit | getArea }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { findkj } from '@/utils'
export default {
  data() {
    return {
      id: '', //项目id
      data: null,
      kjApplyInfo: {}
    }
  },
  mounted() {
    // 获取地址栏中的id
    this.id = this.$route.query.id
    this.findkj()
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      value = parseFloat(value)
      if (value == 0) return '0.00'
      if (!value) return '-'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getDate: function (value) {
      if (!value) return value
      let date = value.split(' ')[0]
      return date
    }
  },
  methods: {
    // 提交正式申请
    goCreditExtension() {
      if (!this.kjApplyInfo.kjapplyid) {
        this.$router.push(`/gsbhzsApplocation?applyid=${this.data.applyid}`)
        setTimeout(() => {
          this.$router.go(0)
        }, 500)
      }
      return
    },
    // 下载清单文件
    download() {
      const imgUrlStr =
        'http://operate.thunlink.cn/protocol/资料清单,操作指南/4关税保函资料清单.docx'
      fetch(imgUrlStr).then(res =>
        res.blob().then(blob => {
          const a = document.createElement('a'), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
            url = window.URL.createObjectURL(blob),
            filename = '关税保函资料清单'
          a.href = url
          a.download = filename
          a.click()
          window.URL.revokeObjectURL(url)
        })
      )
    },
    // 获取详情
    async findkj() {
      let { data } = await findkj(this.id)
      this.data = data
      this.kjApplyInfo = data.kjApplyInfo
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1)
      setTimeout(() => {
        this.$router.go(0)
      }, 50)
    },
    // 返回产品列表
    goCrossBorder() {
      this.$router.push('/productList')
      setTimeout(() => {
        this.$router.go(0)
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.contents {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: rgb(242, 244, 247);
  // 返回上一页
  .back {
    position: absolute;
    left: 30vw;
    top: 0.599rem;
    font-size: 0.0833rem;
    color: #3f6ef2;
    text-decoration: underline;
    user-select: none;
  }
  // 面包屑
  .breadcrumb {
    display: flex;
    align-items: center;
    height: 0.3958rem;
    font-size: 0.0833rem;
    background-color: rgb(242, 244, 247);
    .icon {
      margin: 0 0.0521rem 0 0.0208rem;
    }
    .span {
      font-size: 0.0833rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
    }
    img {
      width: 0.0938rem;
      height: 0.0938rem;
      margin-right: 0.026rem;
    }
  }

  .f1 {
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0.0052rem 0.0521rem 0px rgba(196, 196, 196, 0.15);
    border-radius: 0.0313rem;
    margin-bottom: 0.0521rem;
    padding: 0.1563rem 0.2604rem 0 0.2604rem;
    height: 0.6771rem;
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 0.125rem;
      p {
        font-size: 0.1042rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #000;
      }
      h5 {
        box-sizing: border-box;
        padding: 1px 4px;
        background: #3cb0ff;
        border-radius: 0.0104rem;
        font-size: 0.0729rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 0.0938rem;
        margin-left: 0.0417rem;
      }
      span {
        font-size: 0.0677rem;
        margin-left: 0.2604rem;
        i,
        a {
          color: #3f6ef2;
          text-decoration: underline;
          cursor: pointer;
        }
        .nactive {
          font-size: 14px;
          margin-right: 5px;
          color: #9999 !important;
        }
      }
    }
    // <!-- 产品详细信息开始 -->
    .details {
      width: 100%;
      margin-left: 0.0521rem;
      .details-item {
        display: flex;
        width: 80%;
        justify-content: space-between;
        .details-item-left {
          display: flex;
          height: 100%;
          ul {
            width: 0.625rem;
            height: 100%;
            font-size: 0.0938rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #999999;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            li {
              margin-top: 0.1042rem;
              height: 0.1563rem;
              background-color: #fff;
            }
          }
          div {
            width: 1.3021rem;
            height: 100%;
            margin-left: 0.0625rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            z-index: 99;
            p {
              height: 0.1563rem;
              font-size: 0.0938rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #000;
              margin-top: 0.1042rem;
            }
          }
        }
      }
    }
  }
  .f2 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.0313rem;
    padding: 0.1823rem 0.2604rem;
    scroll-behavior: smooth;
    overflow: auto;

    h2 {
      font-size: 0.0833rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #333;
      margin: 0.0781rem 0.0781rem 0.0521rem 0.0781rem;
    }
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 0.3125rem;
      z-index: 99;
      margin-bottom: 0.2344rem;
      h3 {
        font-size: 0.125rem;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #222222;
        height: 0.1667rem;
        line-height: 0.1458rem;
        text-align: center;
        box-sizing: border-box;
      }
    }
    // 进度
    .schedule {
      width: 100%;
      margin: 0.2604rem 0;
      .schedule1 {
        box-sizing: border-box;
        padding: 0 0.2344rem;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: 0.1823rem;

        img {
          width: 0.1823rem;
        }
        h1 {
          width: 4.1667rem;
          height: 0.0052rem;
          &.yfk {
            background: #3f6ef2;
          }
          &.dfk {
            background: #a4a4a4;
          }
        }
      }
      .schedule2 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        box-sizing: border-box;
        padding: 0 0.1563rem;
        width: 6.25rem;
        height: 0.1823rem;
        h2 {
          width: 4.0625rem;
          height: 0.0052rem;
        }
        span {
          font-size: 0.1042rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #3f6ef2;
          &.dfk {
            color: #a4a4a4;
          }
        }
        .state {
          display: flex;
          justify-content: center;
          justify-items: center;
          position: absolute;
          right: 0.0521rem;
          width: 0.2083rem;
          height: 0.1042rem;
          background: #22b556;
          opacity: 0.8;
          border-radius: 0.0104rem;
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          &.tg {
            background: #22b556;
          }
          &.jj {
            background: #fc6464;
          }
        }
      }
      .schedule3 {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: 0.1823rem;
        h3 {
          width: 3.724rem;
          height: 0.0052rem;
        }
        span {
          display: block;
          width: 0.8333rem;
          text-align: center;
          font-size: 0.0833rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #8d93a1;
        }
      }
    }
    .titles {
      display: flex;
      align-items: center;
      h1 {
        height: 0.1042rem;
        width: 0.0313rem;
        background-color: #e8903c;
      }
      h3 {
        font-size: 0.1042rem;
        font-family: Source Han Sans SC;
        font-weight: 500;
        color: #e8903c;
        margin-left: 0.0625rem;
      }
    }
    .null {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 1.5625rem;
      img {
        width: 1.6979rem;
        height: 1.1042rem;
      }
      p {
        font-size: 0.0677rem;
        color: #666;
        margin-bottom: 0.0417rem;
        a {
          color: #3f6ef2;
          cursor: pointer;
        }
        span {
          color: #3f6ef2;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }

    // 基本信息
    .details-item {
      display: flex;
      margin: 0.0521rem 0.0781rem;
      .details-item-left {
        display: flex;
        width: 100%;
        height: 100%;
        ul {
          width: 1.6667rem;
          height: 100%;
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          li {
            margin-top: 0.1042rem;
            height: 0.1563rem;
            background-color: #fff;
          }
        }
        div {
          width: 0.7031rem;
          height: 100%;
          margin-left: 0.0781rem;

          z-index: 99;
          p {
            height: 0.1563rem;
            font-size: 0.0938rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #000000;
            margin-top: 0.1042rem;
          }
        }
      }
    }
    // 表格编辑/查看
    .span {
      display: inline-block;
      width: 0.1563rem;
      height: 0.125rem;
      font-size: 0.0729rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #3f6ef2;
      border-bottom: 0.0052rem solid #3f6ef2;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
/* 表格 */
.el-table {
  th.el-table__cell > .cell {
    font-size: 0.0833rem;
    font-weight: 400;
  }
  .cell {
    font-size: 0.0833rem;
  }
}
.el-table tr {
  height: 0.2083rem;
}
.el-table thead {
  height: 0.2083rem;
}
.el-button--small {
  padding: 0;
}
/* 输入框样式  */
.el-input__inner {
  box-sizing: border-box;
  width: 1.4583rem;
  height: 0.2031rem;
  font-size: 0.0781rem;
  border: 0.0052rem solid #e0e0e0;
  border-radius: 0px;
  padding: 0.0521rem 0.0521rem;
  color: #606266;
  outline: 0;
}
/* 邀请客户弹窗 */
.el-dialog--center .el-dialog__body {
  padding: 0.1302rem 0 0.1563rem;
}
.el-form-item__label {
  padding-right: 0.0313rem !important;
}
</style>
